<template>
  <div>
    <el-button type="success" size="small" @click="centerDialogVisible = true">新增</el-button>
    <el-table :data="nodeData" border style="width: 100%" v-fit-columns>
      <el-table-column prop="id" label="ID" align='center'>
      </el-table-column>
      <el-table-column prop="title" label="菜单名称" align='center'>
      </el-table-column>
      <el-table-column prop="icon" label="菜单图标" align='center'>
      </el-table-column>
      <el-table-column prop="path" label="菜单路径" align='center'>
      </el-table-column>
      <el-table-column prop="component" label="菜单组件" align='center'>
      </el-table-column>
      <el-table-column prop="children" label="二级菜单" align='center'>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" align='center'>
      </el-table-column>
      <el-table-column label="操作"  align='center'>
        <template slot-scope="scope">

          <el-button type="success" size='small' @click="handleChange(scope.row)">编辑</el-button>
          <!--    <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm='delUser(scope.row)'>
	          <el-button slot="reference" type="success" size='small' style="margin-left: 10px;">删除
	          </el-button>
	        </el-popconfirm> -->
        </template>
      </el-table-column>

    </el-table>

    <!-- //新增菜单 -->
    <el-dialog title="新建菜单" :visible.sync="centerDialogVisible" width="50%" center>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="菜单标题" prop="title">
          <el-input v-model="ruleForm.title" placeholder="title"></el-input>
        </el-form-item>
        <el-form-item label="菜单排序" prop="sort">
          <el-input v-model="ruleForm.sort" placeholder="sort"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="ruleForm.icon" placeholder="icon"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="name"></el-input>
        </el-form-item>
        <el-form-item label="根路径" prop="path">
          <el-input v-model="ruleForm.path" placeholder="path"></el-input>
        </el-form-item>
        <el-form-item label="前端路由" prop="component">
          <el-input v-model="ruleForm.component" placeholder="component"></el-input>
        </el-form-item>
        <div id="chose" style="width: 100%;margin: 0 auto;text-align: center;">
          <el-button type="primary" @click="submitForm()">创建</el-button>

          <el-button type="danger" @click="resetruleForm()">取 消</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- //编辑菜单 -->
    <el-dialog title="编辑菜单信息" :visible.sync="changeDialogVisible" width="50%" center>
      <el-form :model="changeForm" :rules="rules" ref="changeForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="菜单ID" prop="title">
          <el-input v-model="changeForm.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="菜单标题" prop="title">
          <el-input v-model="changeForm.title"></el-input>
        </el-form-item>
        <el-form-item label="菜单排序" prop="sort">
          <el-input v-model="changeForm.sort"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="changeForm.icon"></el-input>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="changeForm.icon"></el-input>
        </el-form-item>
        <el-form-item label="根路径" prop="path">
          <el-input v-model="changeForm.icon"></el-input>
        </el-form-item>
        <el-form-item label="前端路由" prop="component">
          <el-input v-model="changeForm.component"></el-input>
        </el-form-item>

        <div id="chose" style="width: 100%;margin: 0 auto;text-align: center;">
          <el-button type="primary" @click="submitchangeForm()">确认修改</el-button>

          <el-button type="danger" @click="changeDialogVisible = false;">取 消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
  import {
    addNode,
    nodeList,
    changeNode

  } from "@/api/admin"
  import {
    getToken
  } from '@/utils/auth'
  export default {
    created() {
      const token = getToken()
      this.getList(token)
      this.getRole(token)
    },
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        changeId: '', //修改需要的id
        option: '', //权限列表
        visible: true,
        nodeData: [], //渲染的表单数据
        centerDialogVisible: false,
        changeDialogVisible: false,
        checkPass: '',
        ruleForm: {
          //提交的数据
          type: 0,
        },
        changeForm: {
          //修改的数数据
          id: '',
          title: '',
          icon: '',
          name: '',
          path: '',
          component: ''

        },
        rules: {
          //输入框验证规则
          nameR: [{
            min: 3,
            max: 5,
            message: '长度在 3 到 5 个字符',
            trigger: 'blur'
          }],
          pass: [{
            validator: validatePass,
            trigger: 'blur'
          }],
          checkPass: [{
            validator: validatePass2,
            trigger: 'blur'
          }],

        }
      }
    },
    computed: {
      // changeUser:function(){
      //   return `编辑${this.changeUser}信息`
      // }
    },
    methods: {
      //删除管理员
      delUser(row) {
        deleteUser(row.id).then(res => {

          if (res.code == 200) {
            this.$message.success('删除成功');
            this.getList(getToken())
          } else {
            this.$message.error(res.msg);
            this.loading = false;
          }
        })

      },
      //传id
      handleChange(row) {
        console.log(row)
        this.changeForm = row
        // this.changeForm.id=row.id
        // this.changeForm.title=row.title
        // this.changeForm.sort=row.sort
        // this.changeForm.icon=row.icon
        // this.changeForm.name=row.name
        // this.changeForm.path=row.path
        // this.changeForm.component=row.component
        this.changeDialogVisible = true
      },
      //修改信息方法
      submitchangeForm() {
        this.listLoading = true
        console.log('修改的信息', this.changeForm)
        changeNode((JSON.stringify(this.changeForm)), this.changeId).then(res => {
          if (res.code == 200) {
            this.$message.success('修改成功');
            this.getList(getToken())
            this.changeDialogVisible = false
          } else {
            this.$message.error(res.msg);
            this.loading = false;
          }

          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
        console.log('提交成功')
      },

      handleClick(row) {
        console.log(row)
      },
      getRole(token) {
        this.listLoading = true
        nodeList(token).then(res => {
          console.log("biao", res.data)
          this.option = res.data
          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      },
      getList(token) {
        this.listLoading = true
        nodeList(token).then(res => {

          this.nodeData = res.data
          console.log(res)
          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
      },
      //创建新增
      submitForm() {
        this.listLoading = true
        console.log('提交的信息', this.ruleForm)
        this.resetruleForm()
        addNode(JSON.stringify(this.ruleForm)).then(res => {
          if (res.code == 200) {
            this.getList(getToken())
            this.centerDialogVisible = false;
            this.$message.success('创建成功');
          } else {
            this.$message.error(res.msg);
            this.loading = false;
          }


          // Just to simulate the time of the request
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        })
        console.log('提交成功')
      },

      resetruleForm() {
        this.centerDialogVisible = false;
      }

    },

  }
  //  import { adminList } from "@/api/admin"
  //  import { getToken } from '@/utils/auth'
  //  export default {
  // created() {
  //   const token= getToken()
  //    this.getList(token)
  //  },
  //    data() {
  //      return {
  //        tableData:[
  //          {
  //            id:"id",
  //            username:"1111",
  //            avatar:"222",
  //            updated_at:"3333"
  //          }
  //        ],
  //      }
  //    },
  //    methods:{
  //      getList(token) {
  //        this.listLoading = true
  //        adminList(token).then(response => {

  //          // this.tableData=response.data.data
  //          console.log(this.tableData)
  //          // Just to simulate the time of the request
  //          setTimeout(() => {
  //            this.listLoading = false
  //          }, 1.5 * 1000)
  //        })
  //      },
  //    }
  //  }
</script>
<style scoped>
  /* .is-required */
</style>
